<template>
  <div class="top-card-container">
    <div class="header">
      <span>{{ title }}</span>
      <span class="warning"><i class="el-icon-warning-outline" /></span>
    </div>
    <div class="content">{{ content }}</div>
    <div class="chart">
      <slot name="chart" />
    </div>
    <div class="footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopCard',
  components: {},
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  color: pink;
}
.content {
  font-weight: 500;
  font-size: 20px;
  color: skyblue;
  padding: 10px 0;
}
.chart {
  height: 70px;
  font-size: 14px;
}
.warning {
  cursor: pointer;
}
</style>
